import React, { useCallback, useEffect } from 'react'
import { Image, Tooltip } from 'antd'
import AudioPlayer from 'react-h5-audio-player'
import 'react-h5-audio-player/lib/styles.css'
import { audioPathMap } from '@/views/utils/statusMap'
import CaseBox from './Box'
import CaseSortTitle from './Title'
import styles from './Case.module.scss'
import TopTitleBox from './TopTitleBox'

const CaseAudio = ({ data, reinforceType }) => {
  const { 0: origin, 1: adv, 2: def } = audioPathMap
  useEffect(() => {}, [])

  const getResultData = useCallback((nowData) => {
    return (
      <div className={styles.reInforceCase}>
        <Tooltip title={nowData[0]}>
          <p className={styles.reInforceCaseName}>{nowData[0]}</p>
        </Tooltip>

        <p className={styles.boldFont}>
          {Number(nowData[2] * 100).toFixed(1) + '%'}
        </p>
      </div>
    )
  }, [])
  return (
    <div className={styles.imageBox}>
      <CaseBox title={origin[2]}>
        <TopTitleBox>{origin[3]}</TopTitleBox>
        <AudioPlayer
          autoPlay={false}
          src={data[origin[0]]}
          onPlay={(e) => console.log('onPlay')}
          showJumpControls={false}
          showFilledVolume={true}
          autoPlayAfterSrcChange={false}
          layout="stacked-reverse"
          className={'audioPlayer'}
        />
        <CaseSortTitle>分类结果Top5：</CaseSortTitle>
        {getResultData(data[origin[1]])}
      </CaseBox>
      <CaseBox title={adv[2]}>
        <TopTitleBox>{adv[3]}</TopTitleBox>
        <AudioPlayer
          autoPlay={false}
          src={data[adv[0]]}
          onPlay={(e) => console.log('onPlay')}
          showJumpControls={false}
          showFilledVolume={true}
          autoPlayAfterSrcChange={false}
          layout="stacked-reverse"
          className={'audioPlayer'}
        />
        <CaseSortTitle>分类结果Top5：</CaseSortTitle>
        {getResultData(data[adv[1]])}
      </CaseBox>
      <CaseBox title={def[2]}>
        <TopTitleBox>{reinforceType ? def[4] : def[3]}</TopTitleBox>
        <AudioPlayer
          autoPlay={false}
          src={data[def[0]]}
          onPlay={(e) => console.log('onPlay')}
          showJumpControls={false}
          showFilledVolume={true}
          autoPlayAfterSrcChange={false}
          layout="stacked-reverse"
          className={'audioPlayer'}
        />
        <CaseSortTitle>分类结果Top5：</CaseSortTitle>
        {getResultData(data[def[1]])}
      </CaseBox>
    </div>
  )
}
export default CaseAudio
